/* checkbox settings 👇 */

.switch {
    /* global */
    --total_transition_duration: .3s;
    /* switch */
    --slider_width: 2.875em;
    --slider_height: 1.5em;
    --slider_light_bg: linear-gradient(90deg, #f32a85 0%, #f19d36 100%);
    --slider_night_bg: linear-gradient(90deg, #1701a1 0%, #af0693 75%);
    --slider_offset: calc((var(--slider_height) - var(--circle_diameter)) / 2);
    --slider_radius: calc(var(--slider_height) / 2);
    /* circle */
    --circle_diameter: 1.125em;
    --circle_rotation: 360deg;
    /* svg */
    --svg_width: var(--circle_diameter);
    --sun-color: #fff;
    --moon-color: #fff;
  }
  
  .switch input {
    display: none;
  }
  
  .slider svg {
    position: absolute;
    height: auto;
    color: var(--svg-color);
    -webkit-transition: var(--total_transition_duration) ease;
    transition: var(--total_transition_duration) ease;
    width: 100%;
  }
  
  .circle svg.sun {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    color: var(--sun-color);
  }
  
  .circle svg.moon {
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
    color: var(--moon-color);
    width: calc(100% - 2px);
  }
  
  .slider {
    display: inline-block;
    width: var(--slider_width);
    height: var(--slider_height);
    border-radius: var(--slider_radius);
    position: relative;
    cursor: pointer;
    -webkit-transition: var(--total_transition_duration) ease;
    transition: var(--total_transition_duration) ease;
    overflow: hidden;
  }
  
  .slider::before,
  .slider::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-transition: var(--total_transition_duration) ease;
    transition: var(--total_transition_duration) ease;
  }
  
  /* ::before and ::after backgrounds are needed for smooth 
  transition of gradients otherwise there is no way :\ */
  .slider::before {
    opacity: 0;
    background: var(--slider_night_bg);
  }
  
  .slider::after {
    opacity: 1;
    background: var(--slider_light_bg);
  }
  
  /* ------------ */
  
  .circle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: var(--circle_diameter);
    height: var(--circle_diameter);
    position: absolute;
    top: var(--slider_offset);
    left: var(--slider_offset);
    -webkit-transition: var(--total_transition_duration) ease;
    transition: var(--total_transition_duration) ease;
    z-index: 10;
  }
  
  /* actions */
  
  .switch input:checked+.slider::before {
    opacity: 1;
  }
  
  .switch input:checked+.slider::after {
    opacity: 0;
  }
  
  .switch input:active+.slider .circle {
    -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
            transform: scale(0.9);
  }
  
  .switch input:checked+.slider .circle {
    left: calc(100% - var(--circle_diameter) - var(--slider_offset));
  }
  
  .switch input:checked+.slider .sun {
    -webkit-transform: scale(0) rotate(var(--circle_rotation));
        -ms-transform: scale(0) rotate(var(--circle_rotation));
            transform: scale(0) rotate(var(--circle_rotation));
  }
  
  .switch input:checked+.slider .moon {
    -webkit-transform: scale(1) rotate(var(--circle_rotation));
        -ms-transform: scale(1) rotate(var(--circle_rotation));
            transform: scale(1) rotate(var(--circle_rotation));
  }